<template>
  <component v-if='carMessage !== null'>
    <div align='center' >
      <q-card class='content-size'>
        <div align='left' class='card-title '>
          <TriangleIcon/>
          <span class='message-title '>车况综述</span>
        </div>
        <Table
          :dataSet='carMessage.dataSet'
        />
        <div class='quality'>
          <Quality v-if='carMessage.quality'/>
        </div>
        <Status
          :water='carMessage.water'
          :fire='carMessage.fire'
          :crash='carMessage.crash'
        />
      </q-card>
    </div>

  </component>
</template>

<script lang='ts'>
import { defineComponent, PropType } from 'vue';
import Table from './Table.vue'
import TriangleIcon from './TriangleIcon.vue'
import { TableValue } from 'pages/kungfu/model/TableValue';
import Quality from './Quality.vue';
import Status from './/Status.vue';
import { CarMessageModel } from 'pages/kungfu/model/ReportData';
export default defineComponent ({
  name: 'CarMessage',
  components: { Status, Table,TriangleIcon,Quality},
  props: {
    carMessage: {
      type:  Object as PropType<CarMessageModel>,
      required: true
    }
  },
  setup () {


    return {

    }
  }
});
</script>

<style scoped lang='sass'>
.quality
  margin-top: 1em
  margin-bottom: 1em

@import url("../style/Style.sass")

</style>
